<template style="background-color: red;width: 100%;height: 100%">
  <el-container>
    <el-main >
      <el-row :gutter="20">
        <el-col :span="20" >
               <EventSelect v-show="eventSelct"></EventSelect>

        </el-col>
        <el-col :span="4" style="height: 600px;">
          <el-steps direction="vertical"  :active="active" finish-status="success">
            <el-step title="事件选择" description="事件类型：未选择类型"></el-step>
            <el-step title="基本信息" description="提交时间：未完成"></el-step>
            <el-step title="事件详情" description="提交时间：未完成"></el-step>
            <el-step title="完成上报" description="完成时间：完成"></el-step>
          </el-steps>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <el-button type="primary" style="margin-left:auto;margin-right: auto" @click="pre">上一步</el-button>
      <el-button type="primary"  @click="pre">保存草稿箱</el-button>
      <el-button type="success" style="margin-top: 12px;" @click="next">下一步</el-button>
    </el-footer>
  </el-container>
</template>
<style scoped>
   html,body{
     width: 100%;
     height: 100%;
   }

</style>

<script>
  import EventSelect from './eventSelect'
  export default {
    name: "mySubmit",
    components: { EventSelect },

    data() {
      return {
        active: 0,
        eventSelct:true,
      }
    },
    created() {

    },
    methods: {
      /** 查询应用列表 */
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      pre(){
        if (this.active-- > 2) this.active = 0;
      }
    }
  };
</script>
